<template>
  <div class="box">
    <header class="header">
      <van-search
        v-model="keyinfo"
        @focus="$router.push('/search')"
      >
        <template #left>
          <van-icon name="arrow-left" @click="$router.push('/kind')"/>
        </template>
      </van-search>
    </header>
    <div class="content">
      <van-sticky :offset-top="43">
        <van-dropdown-menu>
          <van-dropdown-item v-model="value1" :options="option1" @change="priceSort"/>
          <van-dropdown-item v-model="value2" :options="option2" />
          <van-dropdown-item title="筛选" ref="item">
            <van-cell center title="包邮">
              <template #right-icon>
                <van-switch v-model="switch1" size="24" active-color="#ee0a24" />
              </template>
            </van-cell>
            <van-cell center title="团购">
              <template #right-icon>
                <van-switch v-model="switch2" size="24" active-color="#ee0a24" />
              </template>
            </van-cell>
            <div style="padding: 5px 16px;">
              <van-button type="danger" block round @click="onConfirm">
                确认
              </van-button>
            </div>
          </van-dropdown-item>
        </van-dropdown-menu>
      </van-sticky>
      <Prolist :prolist="prolist"></Prolist>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Image as VanImage, DropdownMenu, DropdownItem, Switch, Cell, Button, Sticky, Search, Icon } from 'vant'
import Prolist from './components/Prolist'
import { getCategoryBrandList, fuzzySearch } from '@/api/search'

Vue.use(VanImage)
Vue.use(DropdownMenu)
Vue.use(DropdownItem)
Vue.use(Switch)
Vue.use(Cell)
Vue.use(Button)
Vue.use(Sticky)
Vue.use(Search)
Vue.use(Icon)
export default {
  components: {
    Prolist
  },
  data () {
    return {
      prolist: [],
      oldlist: [],
      keyinfo: '',
      value1: 0,
      value2: 'a',
      switch1: true,
      switch2: true,
      option1: [
        { text: '价格排序', value: 0 },
        { text: '价格升序', value: 1 },
        { text: '价格降序', value: 2 }
      ],
      option2: [
        { text: '默认排序', value: 'a' },
        { text: '好评排序', value: 'b' },
        { text: '销量排序', value: 'c' }
      ]
    }
  },
  methods: {
    priceSort () {
      if (this.value1 === 0) {
        this.prolis = this.oldlist
      } else if (this.value1 === 1) {
        this.prolist.sort((a, b) => {
          return a.price - b.price
        })
      } else {
        this.prolist.sort((a, b) => {
          return b.price - a.price
        })
      }
    },
    onConfirm () {
      this.$refs.item.toggle()
    }
  },
  created () {
    const category = this.$route.query.category
    const brand = this.$route.query.brand
    if (category !== undefined && brand !== undefined) {
      getCategoryBrandList({
        category,
        brand
      }).then(res => {
        this.prolist = res.data.data
        this.oldlist = JSON.parse(JSON.stringify(this.prolist))
        this.keyinfo = brand
      })
    }
    const keywords = this.$route.query.keywords
    if (keywords !== undefined) {
      fuzzySearch({
        keywords
      }).then(res => {
        this.prolist = res.data.data
        this.oldlist = JSON.parse(JSON.stringify(this.prolist))
        this.keyinfo = keywords
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.van-search {
  height: 0.44rem;
  .van-icon{
    font-size: 18px;
  }
  .van-cell{
    padding: 2px 0;
  }
  .van-search__content.van-search__content--square {
    margin-left: 12px;
  }
}
</style>
